<template>
    <div class="common-layout">
      <el-container>
        <!-- 头部部分 -->
        <el-header>
          <span style="font-size:  40px;" >《智慧酒店项目》</span>
        </el-header>
        <el-container>
          <!-- 左侧部分 -->
          <el-aside width="200px">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="route.path"
              text-color="#fff"
              router
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>默认页面</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/HomeView'">HomeView</el-menu-item>
                  <el-menu-item index="/about">AboutView</el-menu-item>
                  <el-menu-item index="/Demo">测试</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>

              
                <el-sub-menu index="2">
                <template #title>
                  <el-icon><icon-menu /></el-icon>
                  <span>商品管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/AddGoods">添加商品</el-menu-item>
                  <el-menu-item index="/ShowGoods">商品信息</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="3">
                <template #title>
                  <el-icon><icon-menu /></el-icon>
                  <span>权限管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/AddUser">添加用户角色</el-menu-item>
                  <el-menu-item index="/ShowUser">用户角色信息</el-menu-item>
                  <el-menu-item index="/AddPermission">添加角色权限</el-menu-item>
                  <el-menu-item index="/ShowRolePermission">角色权限信息</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="a3">
                <template #title>
                  <el-icon><icon-menu /></el-icon>
                  <span>订单管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/ShowOrder">显示订单</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/Echarts">折线图</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
                
              <el-menu-item index="4">
                <el-icon><icon-menu /></el-icon>
                <span>Navigator Two</span>
              </el-menu-item>
              <el-menu-item index="5" disabled>
                <el-icon><document /></el-icon>
                <span>Navigator Three</span>
              </el-menu-item>
              <el-menu-item index="6">
                <el-icon><setting /></el-icon>
                <span>Navigator Four</span>
              </el-menu-item>
            </el-menu>
          </el-aside>

          <!-- 右侧部分 -->
          <el-main><RouterView /></el-main>
        </el-container>
      </el-container>
    </div>
  </template>

<script lang="ts" setup>
  import {  Document, Menu as IconMenu, Location, Setting, } from '@element-plus/icons-vue'
  import { useRouter,useRoute } from 'vue-router';

const router=useRouter()
const route=useRoute()

</script>
  <style>
  .el-header {
      height: 60px;
      line-height: 60px;
      background-color: rgb(37 82 209);
      color: #09f02f;
  }
  
  .el-aside {
      min-height: calc(100vh - 60px);
      background-color: #545c64;
  }
  .el-main {
      min-height: calc(100vh - 60px);
      background-color: #fff;
  }
  </style>